<template>
  <div>
    <!-- 主要用于功能演示 -->
    <h3>card</h3>
    <!-- el-card
               插槽："header/默认插槽"
               header：标题部分
               默认插槽：内容部分   -->
    <el-card>
      <template #header>
        <div>
          黑马面经运营后台
        </div>
      </template>
      <div>我是内容部分</div>
    </el-card>
    <!-- 增：表单  删  改：表单   查 表格 -->
    <!-- 表单  -->
    <!-- 输入框el-input  v-model:值的双向绑定-->
    <!-- 按钮el-button     -->
    <!-- 默认按钮  el-button -->
    <!-- 主要按钮  el-button type="primary"  -->
    <!-- el-form label-width:标题宽度 -->
    <!-- el-form-item  label:标题 -->
    <el-form label-width="80px">
      <el-form-item label="用户名">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align:center">
      <el-button type="primary">登录</el-button>
      <el-button>重置</el-button>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
/* scoped:只能用于当前组件与子组件最外层（看得到的管得到，看不到的管不到） */
/* scoped管不到但又想管到：
   >>>   /deep/  知道就可以了，有兼容性问题
   ::v-deep  只需要掌握这个就可以了  在希望管到的class前加上就可以了
   用法  ::v-deep 相应的class等css
   注意点：可以管到的就不要加了，加了可能反而管不到了
*/
::v-deep .el-card__header {
  background-color: #727cf5;
  color: #fff;
  text-align: center;
}
</style>
